<template>
	<div class="home">
    <el-row :gutter="15" class="mt15">

			
			<el-col :md="24" :lg="24" :xl="24" class="mb15">
				<el-card shadow="hover">
					<div slot="header">
						<span>Top10消费榜单</span>
						<!-- 热销菜品 -->
						<!-- <span>{{ $t('message.card.title7') }}</span> -->
					</div>
					<div class="charts">
						<div class="charts-left mr7">
							<div ref="top10" class="h100"></div>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>

	</div>
</template>



<script>
import * as echarts from 'echarts';
	import axios from 'axios';
  export default {
	name: 'pagesFormAdapt',
    data() {
      return {
        requesturl:"http://162.14.107.118:8086/"
        
      }
    },
    methods: {
      getTop10(){
        axios.get(this.requesturl+"PC/getTop10").then(res=>{
          let mo=res.data.data 
          let username=[]
          let usermoney=[]
          for (let index = 0; index < mo.length; index++) {
            username[index] = mo[index].username
            usermoney[index] = mo[index].money
          }
          // console.log(username,usermoney);
          const myChart = echarts.init(this.$refs.top10);
				const option = {
					grid: {
						top: 50,
						right: 20,
						bottom: 30,
						left: 30,
					},
					tooltip: {
						trigger: 'item',
					},
					legend: {
						left: 'center',
					},
					series: [
						{
							name: '消费榜单',
							type: 'pie',
							// radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							itemStyle: {
								borderRadius: 10,
								borderColor: '#fff',
								borderWidth: 2,
							},
							data: [
								{ value: parseInt(username[0]) , name: usermoney[0] },
                { value: parseInt(username[1]) , name: usermoney[1] },
                { value: parseInt(username[2]) , name: usermoney[2] },
                { value: parseInt(username[3]) , name: usermoney[3] },
                { value: parseInt(username[4]) , name: usermoney[4] },
                { value: parseInt(username[5]) , name: usermoney[5] },
                { value: parseInt(username[6]) , name: usermoney[6] },
                { value: parseInt(username[7]) , name: usermoney[7] },
                { value: parseInt(username[8]) , name: usermoney[8] },
                { value: parseInt(username[9]) , name: usermoney[9] },
								// { value: 4, name: '商家接单' },
								// { value: 5, name: '顾客付款' },
							],
								top: 30,
							},
						],
					};
					myChart.setOption(option);
					window.addEventListener('resize', () => {
						myChart.resize();
					});
			})

        }
      
    },
    created(){
      
    },
    mounted(){
      this.getTop10()
    }

  }
</script>

<style scoped lang="scss">
@import './index.scss';
</style>